<template>
  <view class="content">
    <!-- 第一个圆 -->
    <view class="circle1">
      <image src="../../static/images/circle1.png" mode=""></image>
    </view>
    
    <!-- 第二个圆 -->
    <view class="circle2">
      <image src="../../static/images/circle2.png" mode=""></image>
    </view>
    
    <!-- 第三个圆 -->
    <view class="circle3">
      <image src="../../static/images/circle3.png" mode=""></image>
    </view>
  </view>
</template>

<script>
  export default {
    name:"m-background",
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss" scoped>
  .content{
	  width: 100%;
	  height: 1448rpx;
      position: relative;
    .circle1{
      // position: absolute;
      margin-left: 648.94rpx;
      margin-top: 12rpx;
      image{
        width: 201.9rpx;
        height: 201.9rpx;
        opacity: 0.2;
        border-radius: 100.95rpx;
        transform: rotate(30deg);
        background: rgba(97, 155, 255, 1);
      }
    }
    
    .circle2{
      // position: absolute;
      margin-left: -230.64rpx;
      top: 326rpx;
      image{
        width: 411.76rpx;
        height: 411.76rpx;
        opacity: 0.2;
        border-radius: 205.88rpx;
        transform: rotate(30deg);
        background: rgba(97, 155, 255, 1);
      }
    }
    
    .circle3{
      position: absolute;
      margin-left: 468.76rpx;
      // margin-top: 1038.56rpx;
      top: 770rpx;
      // margin-bottom: 0rpx;
      image{
        width: 505.76rpx;
        height: 505.76rpx;
        opacity: 0.2;
        border-radius: 252.88rpx;
        transform: rotate(30deg);
        background: rgba(97, 155, 255, 1);
      }
    }
  }
</style>